<template>
  <!-- 主内容区域 -->
  <div class="content-area">
    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-input
        v-model="searchQuery"
        placeholder="搜索患者姓名、病历号或诊断"
        class="search-input"
        :prefix-icon="Search"
        clearable
      />
      <el-select v-model="filterDepartment" placeholder="全部科室" clearable>
        <el-option
          v-for="dept in departments"
          :key="dept.value"
          :label="dept.label"
          :value="dept.value"
        />
      </el-select>
      <el-select v-model="filterStatus" placeholder="全部状态" clearable>
        <el-option
          v-for="status in statusOptions"
          :key="status.value"
          :label="status.label"
          :value="status.value"
        />
      </el-select>
      <el-date-picker
        v-model="filterDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
      <el-button type="primary" :icon="Search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">总病历数</div>
          <div class="stat-icon">
            <el-icon><Document /></el-icon>
          </div>
        </div>
        <div class="stat-value">156</div>
        <div class="stat-desc">全部病历记录</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">今日更新</div>
          <div class="stat-icon today-icon">
            <el-icon><Calendar /></el-icon>
          </div>
        </div>
        <div class="stat-value">8</div>
        <div class="stat-desc">今日新增/更新</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">待完善</div>
          <div class="stat-icon pending-icon">
            <el-icon><Clock /></el-icon>
          </div>
        </div>
        <div class="stat-value">12</div>
        <div class="stat-desc">需要补充信息</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-title">已完成</div>
          <div class="stat-icon completed-icon">
            <el-icon><Checked /></el-icon>
          </div>
        </div>
        <div class="stat-value">144</div>
        <div class="stat-desc">完整病历记录</div>
      </div>
    </div>

    <!-- 病历列表 -->
    <div class="record-list-card">
      <div class="section-title">
        <span>病历列表</span>
        <div class="header-actions">
          <el-button type="primary" :icon="Plus" @click="editRecord(null)"
            >新建病历</el-button
          >
          <el-button :icon="Download">导出</el-button>
        </div>
      </div>

      <el-table
        :data="filteredRecords"
        style="width: 100%"
        stripe
        v-loading="loading"
      >
        <el-table-column prop="patientName" label="患者姓名" min-width="100" />
        <el-table-column prop="patientId" label="病历号" width="120" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="bedNumber" label="床号" width="100" />
        <el-table-column prop="department" label="科室" min-width="120" />
        <el-table-column prop="diagnosis" label="诊断" min-width="150" />
        <el-table-column prop="doctor" label="主治医生" min-width="120" />
        <el-table-column prop="admissionDate" label="入院日期" width="120" />
        <el-table-column prop="lastUpdate" label="最后更新" width="150" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.recordStatus)" size="small">
              {{ row.statusText }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="viewRecordDetails(row)"
              >查看</el-button
            >
            <el-button size="small" type="primary" @click="editRecord(row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="confirmDeleteRecord(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="empty-state" v-if="!loading && filteredRecords.length === 0">
        <el-empty description="暂无病历记录" />
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :small="true"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredRecords.length"
        />
      </div>
    </div>
  </div>

  <!-- 病历详情对话框 -->
  <el-dialog
    v-model="detailDialogVisible"
    :title="`病历详情 - ${selectedRecord?.patientName}`"
    width="900px"
    top="5vh"
  >
    <div class="record-detail-content" v-if="selectedRecord">
      <!-- 患者基本信息 -->
      <div class="basic-info-section">
        <div class="info-grid">
          <div class="info-item">
            <span class="label">患者姓名：</span>
            <span class="value">{{ selectedRecord.patientName }}</span>
          </div>
          <div class="info-item">
            <span class="label">病历号：</span>
            <span class="value">{{ selectedRecord.patientId }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ selectedRecord.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄：</span>
            <span class="value">{{ selectedRecord.age }}岁</span>
          </div>
          <div class="info-item">
            <span class="label">床号：</span>
            <span class="value">{{ selectedRecord.bedNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">科室：</span>
            <span class="value">{{ selectedRecord.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">主治医生：</span>
            <span class="value">{{ selectedRecord.doctor }}</span>
          </div>
          <div class="info-item">
            <span class="label">入院日期：</span>
            <span class="value">{{ selectedRecord.admissionDate }}</span>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 诊断信息 -->
      <div class="section">
        <h4>诊断信息</h4>
        <p class="diagnosis-text">{{ selectedRecord.diagnosis }}</p>
      </div>

      <el-divider />

      <!-- 生命体征 -->
      <div class="section">
        <h4>生命体征</h4>
        <div class="vitals-grid">
          <div class="vital-item">
            <span class="vital-label">体温：</span>
            <span class="vital-value"
              >{{ selectedRecord.vitalSigns.temperature }}°C</span
            >
          </div>
          <div class="vital-item">
            <span class="vital-label">脉搏：</span>
            <span class="vital-value"
              >{{ selectedRecord.vitalSigns.pulse }}次/分</span
            >
          </div>
          <div class="vital-item">
            <span class="vital-label">呼吸：</span>
            <span class="vital-value"
              >{{ selectedRecord.vitalSigns.respiration }}次/分</span
            >
          </div>
          <div class="vital-item">
            <span class="vital-label">血压：</span>
            <span class="vital-value"
              >{{ selectedRecord.vitalSigns.bloodPressure }}mmHg</span
            >
          </div>
          <div class="vital-item">
            <span class="vital-label">血氧：</span>
            <span class="vital-value"
              >{{ selectedRecord.vitalSigns.oxygen }}%</span
            >
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 用药信息 -->
      <div class="section">
        <h4>用药信息</h4>
        <el-table :data="selectedRecord.medications" size="small" stripe>
          <el-table-column prop="name" label="药品名称" width="120" />
          <el-table-column prop="dosage" label="剂量" width="80" />
          <el-table-column prop="frequency" label="频次" width="100" />
          <el-table-column prop="route" label="给药途径" width="100" />
        </el-table>
      </div>

      <el-divider />

      <!-- 护理记录 -->
      <div class="section">
        <h4>护理记录</h4>
        <p class="nursing-notes">{{ selectedRecord.nursingNotes }}</p>
      </div>

      <el-divider />

      <!-- 特别注意事项 -->
      <div class="section" v-if="selectedRecord.specialNotes">
        <h4>特别注意事项</h4>
        <p class="special-notes">{{ selectedRecord.specialNotes }}</p>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="editRecord(selectedRecord)"
          >编辑病历</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 编辑病历对话框 -->
  <el-dialog
    v-model="editDialogVisible"
    :title="editingRecord?.id ? '编辑病历' : '新建病历'"
    width="800px"
    top="5vh"
  >
    <el-form
      :model="formData"
      label-width="100px"
      :rules="formRules"
      ref="formRef"
    >
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="formData.patientName" placeholder="请输入患者姓名" />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input-number
          v-model="formData.age"
          :min="0"
          :max="120"
          controls-position="right"
        />
      </el-form-item>

      <el-form-item label="床号" prop="bedNumber">
        <el-input v-model="formData.bedNumber" placeholder="请输入床号" />
      </el-form-item>

      <el-form-item label="科室" prop="department">
        <el-select v-model="formData.department" placeholder="请选择科室">
          <el-option label="内科" value="内科" />
          <el-option label="外科" value="外科" />
          <el-option label="儿科" value="儿科" />
          <el-option label="妇产科" value="妇产科" />
          <el-option label="骨科" value="骨科" />
        </el-select>
      </el-form-item>

      <el-form-item label="主治医生" prop="doctor">
        <el-input v-model="formData.doctor" placeholder="请输入主治医生姓名" />
      </el-form-item>

      <el-form-item label="入院日期" prop="admissionDate">
        <el-date-picker
          v-model="formData.admissionDate"
          type="date"
          placeholder="选择入院日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="诊断" prop="diagnosis">
        <el-input
          v-model="formData.diagnosis"
          type="textarea"
          :rows="2"
          placeholder="请输入诊断信息"
        />
      </el-form-item>

      <el-divider>生命体征</el-divider>

      <div class="vitals-form">
        <el-form-item label="体温(°C)" prop="vitalSigns.temperature">
          <el-input-number
            v-model="formData.vitalSigns.temperature"
            :min="35"
            :max="42"
            :step="0.1"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="脉搏(次/分)" prop="vitalSigns.pulse">
          <el-input-number
            v-model="formData.vitalSigns.pulse"
            :min="40"
            :max="200"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="呼吸(次/分)" prop="vitalSigns.respiration">
          <el-input-number
            v-model="formData.vitalSigns.respiration"
            :min="10"
            :max="40"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="血压(mmHg)" prop="vitalSigns.bloodPressure">
          <el-input
            v-model="formData.vitalSigns.bloodPressure"
            placeholder="如：120/80"
          />
        </el-form-item>

        <el-form-item label="血氧饱和度(%)" prop="vitalSigns.oxygen">
          <el-input-number
            v-model="formData.vitalSigns.oxygen"
            :min="80"
            :max="100"
            controls-position="right"
          />
        </el-form-item>
      </div>

      <el-divider>护理信息</el-divider>

      <el-form-item label="护理记录" prop="nursingNotes">
        <el-input
          v-model="formData.nursingNotes"
          type="textarea"
          :rows="3"
          placeholder="请输入护理记录"
        />
      </el-form-item>

      <el-form-item label="特别注意事项" prop="specialNotes">
        <el-input
          v-model="formData.specialNotes"
          type="textarea"
          :rows="2"
          placeholder="请输入特别注意事项"
        />
      </el-form-item>

      <el-form-item label="状态" prop="recordStatus">
        <el-select v-model="formData.recordStatus" placeholder="请选择状态">
          <el-option label="已完成" value="completed" />
          <el-option label="待完善" value="pending" />
          <el-option label="紧急" value="urgent" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRecord">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除确认对话框 -->
  <el-dialog v-model="deleteDialogVisible" title="确认删除" width="400px">
    <span>确定要删除该病历记录吗？此操作不可恢复。</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteRecord">确认删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 搜索和筛选相关
const searchQuery = ref("");
const filterDepartment = ref("");
const filterStatus = ref("");
const filterDate = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const loading = ref(false);

// 对话框控制
const detailDialogVisible = ref(false);
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const selectedRecord = ref(null);
const editingRecord = ref(null);
const deletingRecordId = ref(null);
const formRef = ref();

// 表单数据
const formData = ref({
  patientName: "",
  gender: "",
  age: null,
  bedNumber: "",
  department: "",
  doctor: "",
  admissionDate: "",
  diagnosis: "",
  recordStatus: "pending",
  vitalSigns: {
    temperature: null,
    pulse: null,
    respiration: null,
    bloodPressure: "",
    oxygen: null,
  },
  nursingNotes: "",
  specialNotes: "",
});

// 表单验证规则
const formRules = {
  patientName: [{ required: true, message: "请输入患者姓名", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  bedNumber: [{ required: true, message: "请输入床号", trigger: "blur" }],
  department: [{ required: true, message: "请选择科室", trigger: "change" }],
  doctor: [{ required: true, message: "请输入主治医生", trigger: "blur" }],
  admissionDate: [
    { required: true, message: "请选择入院日期", trigger: "change" },
  ],
  diagnosis: [{ required: true, message: "请输入诊断信息", trigger: "blur" }],
};

// 模拟科室数据
const departments = ref([
  { value: "internal", label: "内科" },
  { value: "surgery", label: "外科" },
  { value: "pediatrics", label: "儿科" },
  { value: "obstetrics", label: "妇产科" },
  { value: "orthopedics", label: "骨科" },
]);

// 状态选项
const statusOptions = ref([
  { value: "completed", label: "已完成" },
  { value: "pending", label: "待完善" },
  { value: "urgent", label: "紧急" },
]);

// 模拟病历数据
const medicalRecords = ref([
  {
    id: 1,
    patientName: "张三",
    patientId: "P20231015001",
    gender: "男",
    age: 65,
    bedNumber: "302-1",
    department: "内科",
    diagnosis: "高血压、冠心病",
    doctor: "王医生",
    admissionDate: "2023-10-15",
    recordStatus: "completed",
    statusText: "已完成",
    lastUpdate: "2023-10-28 14:30",
    vitalSigns: {
      temperature: 36.8,
      pulse: 78,
      respiration: 18,
      bloodPressure: "125/80",
      oxygen: 98,
    },
    nursingNotes: "患者血压稳定，按时服药，情绪良好",
    medications: [
      { name: "硝苯地平", dosage: "10mg", frequency: "每日2次", route: "口服" },
      {
        name: "阿司匹林",
        dosage: "100mg",
        frequency: "每日1次",
        route: "口服",
      },
    ],
    specialNotes: "注意监测血压变化，避免剧烈运动",
  },
  {
    id: 2,
    patientName: "李四",
    patientId: "P20231020001",
    gender: "女",
    age: 48,
    bedNumber: "405-2",
    department: "外科",
    diagnosis: "急性阑尾炎术后",
    doctor: "刘医生",
    admissionDate: "2023-10-20",
    recordStatus: "pending",
    statusText: "待完善",
    lastUpdate: "2023-10-28 10:15",
    vitalSigns: {
      temperature: 37.2,
      pulse: 85,
      respiration: 20,
      bloodPressure: "118/75",
      oxygen: 97,
    },
    nursingNotes: "伤口愈合良好，无感染迹象",
    medications: [
      {
        name: "头孢曲松",
        dosage: "1g",
        frequency: "每日1次",
        route: "静脉注射",
      },
      { name: "布洛芬", dosage: "200mg", frequency: "每日3次", route: "口服" },
    ],
    specialNotes: "注意伤口护理，避免感染",
  },
]);

// 过滤后的病历列表
const filteredRecords = computed(() => {
  let result = medicalRecords.value;

  // 根据搜索词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(
      (record) =>
        record.patientName.toLowerCase().includes(query) ||
        record.patientId.toLowerCase().includes(query) ||
        record.diagnosis.toLowerCase().includes(query)
    );
  }

  // 根据科室过滤
  if (filterDepartment.value) {
    result = result.filter(
      (record) => record.department === filterDepartment.value
    );
  }

  // 根据状态过滤
  if (filterStatus.value) {
    result = result.filter(
      (record) => record.recordStatus === filterStatus.value
    );
  }

  return result;
});

// 获取状态标签类型
const getStatusType = (status) => {
  const map = {
    completed: "success",
    pending: "warning",
    urgent: "danger",
  };
  return map[status] || "info";
};

// 查看病历详情
const viewRecordDetails = (record) => {
  selectedRecord.value = record;
  detailDialogVisible.value = true;
};

// 编辑病历
const editRecord = (record) => {
  if (record) {
    // 编辑现有记录
    editingRecord.value = record;
    formData.value = { ...record };
  } else {
    // 新建记录
    editingRecord.value = null;
    formData.value = {
      patientName: "",
      gender: "",
      age: null,
      bedNumber: "",
      department: "",
      doctor: "",
      admissionDate: "",
      diagnosis: "",
      recordStatus: "pending",
      vitalSigns: {
        temperature: null,
        pulse: null,
        respiration: null,
        bloodPressure: "",
        oxygen: null,
      },
      nursingNotes: "",
      specialNotes: "",
    };
  }
  editDialogVisible.value = true;
};

// 保存病历
const saveRecord = async () => {
  if (formRef.value) {
    try {
      await formRef.value.validate();

      if (editingRecord.value) {
        // 更新现有记录
        const index = medicalRecords.value.findIndex(
          (r) => r.id === editingRecord.value.id
        );
        if (index !== -1) {
          medicalRecords.value[index] = {
            ...formData.value,
            lastUpdate: new Date().toLocaleString(),
          };
          ElMessage.success("病历更新成功");
        }
      } else {
        // 新增记录
        const newRecord = {
          ...formData.value,
          id: Math.max(...medicalRecords.value.map((r) => r.id)) + 1,
          patientId: `P${new Date().getTime()}`,
          lastUpdate: new Date().toLocaleString(),
          statusText:
            formData.value.recordStatus === "completed"
              ? "已完成"
              : formData.value.recordStatus === "pending"
              ? "待完善"
              : "紧急",
        };
        medicalRecords.value.unshift(newRecord);
        ElMessage.success("病历创建成功");
      }
      editDialogVisible.value = false;
    } catch (error) {
      ElMessage.warning("请完善必填信息");
    }
  }
};

// 确认删除病历
const confirmDeleteRecord = (record) => {
  deletingRecordId.value = record.id;
  deleteDialogVisible.value = true;
};

// 删除病历
const deleteRecord = () => {
  const index = medicalRecords.value.findIndex(
    (r) => r.id === deletingRecordId.value
  );
  if (index !== -1) {
    medicalRecords.value.splice(index, 1);
    ElMessage.success("病历删除成功");
  }
  deleteDialogVisible.value = false;
};

// 搜索处理
const handleSearch = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// 重置筛选条件
const resetFilters = () => {
  searchQuery.value = "";
  filterDepartment.value = "";
  filterStatus.value = "";
  filterDate.value = "";
};

onMounted(() => {
  // 初始化数据加载
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.filter-section {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  .search-input {
    width: 300px;
  }

  .el-select {
    width: 140px;
  }

  .el-date-picker {
    width: 300px;
  }
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 16px;
  color: #606266;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 117, 188, 0.1);
  color: #1a75bc;

  &.today-icon {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }

  &.pending-icon {
    background: rgba(230, 162, 60, 0.1);
    color: #e6a23c;
  }

  &.completed-icon {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-desc {
  color: #909399;
  font-size: 14px;
}

.record-list-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.empty-state {
  padding: 40px 0;
}

.record-detail-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.basic-info-section {
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;

  .label {
    color: #606266;
    min-width: 80px;
    font-weight: 500;
  }

  .value {
    color: #303133;
  }
}

.section {
  margin-bottom: 24px;

  h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-weight: 600;
  }
}

.diagnosis-text,
.nursing-notes {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.vital-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;

  .vital-label {
    color: #606266;
    font-weight: 500;
  }

  .vital-value {
    font-weight: 600;
    color: #303133;
  }
}

.special-notes {
  padding: 12px;
  background: #fff6f6;
  border-radius: 8px;
  border-left: 4px solid #f56c6c;
  color: #f56c6c;
  margin: 0;
  line-height: 1.6;
}

.vitals-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
}

// 响应式设计
@media (max-width: 992px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-section {
    .search-input {
      width: 100%;
    }

    .el-select {
      flex: 1;
      min-width: 120px;
    }
  }
}

@media (max-width: 768px) {
  .content-area {
    padding: 16px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;

    .el-select,
    .el-date-picker {
      width: 100%;
    }
  }

  .section-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .header-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .vitals-grid {
    grid-template-columns: 1fr;
  }

  .vitals-form {
    grid-template-columns: 1fr;
  }
}
</style>